<template>
    <main>
        <SearchBar :action="action" v-model:act="action"></SearchBar>
        <teleport to="body">
            <Dialog></Dialog>
        </teleport>
        <List></List>
    </main>
</template>

<script setup>
    import SearchBar from './SearchBar.vue'
    import Dialog from './Dialog.vue'
    import List from './list/List.vue'
    import { onMounted,ref,watch } from 'vue'

    const action = ref('')

    watch(action,async (newValue,oldValue) => {
        if(newValue == '') {
            const actions = await window.myApi.onRendererEvent()
            action.value = actions
        }
    })
    
    //方式二
    // const cb = () => {
    //     console.log('cb')
    // }

    onMounted(async () => {
        window.myApi.openDialog()

        //方式一
        const actions = await window.myApi.onRendererEvent()
        action.value = actions

        //方式二
        //window.myApi.onRendererEvent(cb)

    })

</script>

<style lang="scss" scoped>

</style>